<template>
  <div class="app-container">
    <el-row style="margin-bottom:20px" type="flex" justify="end" align="midden">
      <el-button size="small" type="primary" icon="el-icon-plus" @click="(addMenuDialog=true,isEdit = false)">新 增</el-button>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="index" label="排序" align="center" width="55" />
      <el-table-column prop="name" label="客户分类" align="center" />
      <el-table-column label="功能状态" align="center">
        <template slot-scope="{row}">
          {{ row.status==1?'启用':'禁用' }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="分类描述" align="center" />
      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleModify(row)">编辑</el-button>
          <el-button v-if="row.status===0" size="mini" type="success" @click="handleEnable(row)">启用</el-button>
          <el-button v-if="row.status===1" size="mini" type="warning" @click="handleDisable(row)">禁用</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row)"> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="getList" />
    <el-dialog
      title="编辑分类"
      :visible.sync="addMenuDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
      @close="closeForm"
    >
      <el-form ref="form" :model="form" :rules="formRules" label-width="100px" class="demo-modifyDataForm">
        <el-form-item label="客户分类" prop="name">
          <el-input v-model="form.name" placeholder="请输入客户分类名称" />
        </el-form-item>
        <el-form-item label="功能描述" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入功能描述" />
        </el-form-item>
        <el-form-item label="功能状态">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addMenuDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

import {
  classifyPageList,
  customerClassifyAdd,
  classifyDeleteById,
  classifyUpdateById,
  classifyDisable,
  classifyEnable } from '@/api/customer'

export default {
  name: 'CustomerClassification',
  components: { Pagination },
  data() {
    return {
      id: this.$route.query.id,
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      addMenuDialog: false,
      isEdit: false, // 是否编辑
      form: {
        name: '',
        remark: '',
        status: 0
      },
      formRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleModify(row) {
      this.addMenuDialog = true
      this.isEdit = true
      this.form = row
    },
    // 启用
    handleEnable(row) {
      classifyEnable({
        'id': row.id
      }).then(res => {
        this.$message.success('启用成功')
        this.getList()
      })
    },
    // 禁用
    handleDisable(row) {
      classifyDisable({
        'id': row.id
      }).then(res => {
        this.$message.success('禁用成功')
        this.getList()
      })
    },
    handleDelete(row) {
      this.$confirm(`是否删除 ${row.name} 分类`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        classifyDeleteById({
          'id': row.id
        }).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleAdd() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            classifyUpdateById({
              'id': this.form.id,
              'name': this.form.name,
              'businessId': '0',
              'remark': this.form.remark,
              'status': this.form.status
            }).then(res => {
              this.$message.success('修改成功')
              this.addMenuDialog = false
              this.getList()
            })
          } else {
            customerClassifyAdd({
              'name': this.form.name,
              'remark': this.form.remark,
              'status': this.form.status,
              'businessId': '0'
            }).then(res => {
              this.$message.success('新增成功')
              this.addMenuDialog = false
              this.getList()
            })
          }
        } else {
          return false
        }
      })
    },
    closeForm() {
      this.form = {
        name: '',
        remark: '',
        status: 0
      }
    },
    getList() {
      classifyPageList({
        'name': '',
        'currentPage': this.listQuery.currentPage,
        'pageSize': this.listQuery.pageSize,
        'businessId': '0'
      }).then(res => {
        const { records, total } = res.data
        this.tableData = records
        this.total = total
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.icon-img{
  width: 100px;
  height: 100px;
}
 /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
  }
  /deep/.avatar {
    width: 130px;
    height: 130px;
    display: block;
  }
</style>
